import VueRouter from "vue-router";

import UseVuex1 from '../pages/UseVuex1'
import CountView from '../pages/CountView'
import UseVuex2 from '../pages/UseVuex2'
import PersonView from '../pages/PersonView'
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
import NewsDetail from '../pages/NewsDetail'

const router = new VueRouter({
  routes: [
    {
      name: 'count',
      path: '/count',
      component: CountView,
      beforeEnter(to, from, next) {
        console.log('独享守卫beforeEnter', to, from, next)
        if (!to.meta.isAuth) {
          next()
        }
      },
      meta: {
        isAuth: true,
      },
    },
    {
      name: 'usevuex1',
      path: '/usevuex1',
      component: UseVuex1,
      beforeEnter(to, from, next) {
        console.log('独享守卫beforeEnter', to, from, next)
        if (!to.meta.isAuth) {
          next()
        }
      },
    },
    {
      name: 'usevuex2',
      path: '/usevuex2',
      component: UseVuex2,
    },
    {
      name: 'person',
      path: '/person',
      component: PersonView,
    },
    {
      name: 'about',
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
      children: [
        {
          path: 'news',
          component: News,
          children: [
            {
              name: 'newsDetail',
              path: 'detail/:id/:title',
              component: NewsDetail,
              // props: {id:'001', title: '只能是固定的数据'},
              // props: true // 传过去所有的params的数据
              props({ query, params }) {
                console.log(query, params)
                return {
                  ...params,
                  ...query,
                  title2: `${params.title}新传的params数据字段`
                }
              }
            }
          ]
        },
        {
          name: 'message',
          path: 'message',
          component: Message,
          children: [
            {
              name: 'messageDetail',
              path: 'detail',
              component: Detail
            }
          ]
        }
      ]
		}
  ]
})

router.beforeEach((to, from, next) => {
  console.log('全局守卫beforeEach', to, from, next)
  if (!to.meta.isAuth) {
    next()
  }
})

router.afterEach((to, from) => {
  console.log('全局守卫afterEach', to, from)
  document.title = to.name || 'prject_test';
})

export default router